<template>
  <div style="overflow: hidden;width:100%;height:100%;" id="xGridParent">
    <vxe-grid ref='xGrid' v-bind="GridEvent.grid_options">
      <template #toolbar_tools>
        <el-button type="primary" :size="size" icon="fa fa-plus" @click="GridEvent.newForm()"> 新增</el-button>
        <el-button type="primary" :size="size" icon="fa fa-edit (alias)"  @click="editEvent()"> 修改</el-button>
        <!-- <el-button type="primary" :size="size" icon="fa fa-trash-o" @click="deleteEvent()"> 删除</el-button> -->
        <el-button type="primary" :size="size" @click="deleteEvent()"> 启用/停用</el-button>
      </template>
    </vxe-grid>
    <el-dialog v-dialogDrag :top="formModel.top"
               :title="formModel.title" :visible.sync="formModel.dialogVisible" :width="formModel.width"
               :closeOnClickModal="formModel.closeOnClickModal"
               :before-close="tBizcEneryEquipFormCloseEvent">
      <computerRoomManagementForm v-if="formModel.dialogVisible && formModel.componentId=='TBizcEneryEquipForm' "
                                  :formData="formModel.TBizcEneryEquipFormData"
                                  @closeEvent="tBizcEneryEquipFormCloseEvent"></computerRoomManagementForm>
      <!-- 其他的弹出组件可以写在这里面 -->
    </el-dialog>
  </div>
</template>

<script>
import util from '@/utils/util'
import {reactive} from 'vue'
import {formModel, GridEvent} from './model/computerRoomManagement-table.js'

export default {
  name: "computerRoomManagement",
  components: {
    computerRoomManagementForm: () => import("./components/computerRoomManagementForm.vue")
  },
  data() {
    return {
      size: "small",  //按钮尺寸大小//
      GridEvent: reactive(GridEvent),
      formModel: reactive(formModel),
    }
  },
  methods: {
    setTableHeight: function(){ //高度自�?�应//
      const tableContainer = document.querySelector("#xGridParent");
      const height = tableContainer.clientHeight;
      this.GridEvent.grid_options.height = height-5;
    },
    tBizcEneryEquipFormCloseEvent(reload){
      //form表单编辑窗口关闭事件//
      formModel.closeDialogEvent(reload, this.$refs.xGrid)
    },
    editEvent(){    //编辑事件//
      const rows = this.$refs.xGrid.getCheckboxRecords(true);
      if(rows && rows.length ==1){
        GridEvent.editForm(rows[0]);
      }else{
          this.$message.warning("只能选中1行数据进行编辑")
      }
    },
    deleteEvent(){  //删除事件//
      const rows = this.$refs.xGrid.getCheckboxRecords(true);
      if(rows.length > 0){
        GridEvent.deleteEvent(rows, this.$refs.xGrid);
      } else {
        this.$message.warning("请勾选数据进行状态修改")
      }
    },
    exportWord(){//导出事件
      // alert('导出')
      GridEvent.exportXls(this.$refs.xGrid);
    },
    handlePreview(info){//模板导入
      console.log(info,'iiiiiii');
    },
    downloadXls(){
      window.open(process.env.VUE_APP_APP_API+'/equip/export/downloadTemplate')
      console.log(process.env.VUE_APP_APP_API+'/equip/export/downloadTemplate','地址');
    },
    changeType(){
      let type=util.getRequestParms('type')
      if (type=='search') {
        this.GridEvent.grid_options.columns[1].visible = false;
        this.GridEvent.grid_options.toolbarConfig.slots={}
        let columns2
          this.$nextTick(() => {
               columns2 = this.$refs.xGrid.getColumns()
            })
            setTimeout(() => {
              // 将指定列设置为隐藏状态
              columns2.forEach(column => {

                if('checkbox'==column.type){
                  column.visible = false
                }
              })
              if (this.$refs.xGrid) {
                this.$refs.xGrid.refreshColumn()
              }

            }, 100)
      }
    }
  },
  mounted () {
    this.$nextTick(function(){
      // this.setTableHeight();
      GridEvent.getOptionData_gldw(this.$refs.xGrid)
      GridEvent.getOptionData_interface(this.$refs.xGrid)
      this.changeType()
    })
    window.addEventListener('resize',this.setTableHeight);
  },
  destroyed () {
    window.removeEventListener('resize',this.setTableHeight);
  },
}
</script>

<style scoped>
.upload-demo{
  display: inline;
  margin-left: 10px;
}

</style>

